<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import type { TabsPaneContext } from 'element-plus'
const activeName = ref('first')

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}

// 表格js
import { h } from 'vue'
import type { VNode } from 'vue'
import type { TableColumnCtx } from 'element-plus'
import http from '@/http';
import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'
//获取当前页相关用户数据的方法

const itemName=ref('');
console.log
const tableData= ref();
function getPage(){
http.get('/hco/gethcogroup',{
  params: {
  itemName : itemName.value,
  }
}
)
.then((res)=>{
  itemName.value=''
  console.log(res)
  tableData.value = res
})
}

console.log("aa"+tableData)

onMounted(()=>{
getPage();
})
</script>
<template>
  <form>
<div id="sousuokuang">
  <ul>
    <li>药品名称&nbsp;&nbsp;<input type="text" class="sou" placeholder="药品名称" v-model="itemName"></li>
    <li><el-button type="primary" :icon="Search" style="height: 25px;" @click="getPage">搜索</el-button></li>
    <li><input type="reset" style="background-color: #409eff; width: 80px; height: 25px; color: aliceblue; border: 0px; border-radius: 10%;"></li>
  </ul>
</div>
</form>
<!-- 表格 -->
<el-table :data="tableData" border show-summary style="width: 100%;">
    <el-table-column property="itemName" label="药品名字" />
    <el-table-column property="price" sortable label="药品价格" />
    <el-table-column property="num" sortable label="交易数量" />
    <el-table-column property="amount" sortable label="交易总价" />
  </el-table>
</template>
<style scoped>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
ul li{
  list-style: none;
  float: left;
  padding-left: 20px;
}
#sousuokuang{
  height: 50px;
}
.sou{
  height: 20px;
}
</style>
